<template>
    <div class="ranking-info">
        <template>
            <v-card class="mx-auto" max-width="800">
                <v-img src="../../assets/ranking1.png" height="200px"></v-img>
                <v-card-title>节操币排行 TOP10</v-card-title>
                <v-card-subtitle>氪金强大，服务器需要资金维持</v-card-subtitle>
                <v-card-actions>
                    <v-btn color="orange lighten-2" text>充值</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn icon @click="show = !show">
                        <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                    </v-btn>
                </v-card-actions>
                <v-expand-transition>
                    <div v-show="show">
                        <v-divider></v-divider>
                        <v-card-text>
                            充值入口: 充值网站/游戏内二维码扫码
                        </v-card-text>
                    </div>
                </v-expand-transition>
            </v-card>
        </template>
        <div class="ranking-box">
            <Table :columns="mcrmbCol" :data="mcrmbRanking"></Table>
        </div>
        <template>
            <v-card class="mx-auto" max-width="800">
                <v-img src="../../assets/ranking2.png" height="200px"></v-img>
                <v-card-title>金币排行 TOP20</v-card-title>
                <v-card-subtitle>游戏内资金流通</v-card-subtitle>
                <v-card-actions>
                    <v-btn color="orange lighten-2" text>介绍</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn icon @click="show = !show">
                        <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
                    </v-btn>
                </v-card-actions>
                <v-expand-transition>
                    <div v-show="show">
                        <v-divider></v-divider>
                        <v-card-text>
                            金币流通，可从系统商店收购中获得，或玩家商店
                        </v-card-text>
                    </div>
                </v-expand-transition>
            </v-card>
        </template>
        <div class="ranking-box">
            <Table :columns="coinCol" :data="coinRanking"></Table>
        </div>
    </div>
</template>

<script>
    import Ajax from '../../Ajax'
    export default {
        name: "RankingInfo",
        data() {
            return {
                show: false,
                mcrmbCol: [
                    {
                        title: '玩家名',
                        key: 'playerName'
                    },
                    {
                        title: '氪金额度',
                        key: 'count'
                    },
                    {
                        title: '排名',
                        key: 'rank'
                    }
                ],
                coinCol: [
                    {
                        title: '玩家名',
                        key: 'playerName'
                    },
                    {
                        title: '持有金币',
                        key: 'count'
                    },
                    {
                        title: '排名',
                        key: 'rank'
                    }
                ],
                mcrmbRanking: [
                    {
                        playerName: 'Wetcland',
                        count: 100000,
                        rank: 1
                    }
                ],
                coinRanking: []
            }
        },
        mounted() {
            this.getMcrmbRanking()
            this.getCoinRanking()
        },
        methods: {
            getMcrmbRanking() {

            },
            getCoinRanking() {
                Ajax.post('coin/getCoinRanking').then(res => {
                    if (res.data.code == 200) {
                        res.data.list.map((v, i) => {
                            v.playerName = v.player
                            v.count = v.balance
                            v.rank = i + 1
                            this.coinRanking.push(v)
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .ranking-info {
        .ranking-box {
            padding: 30px;
        }
    }
</style>
